<template>
	<view sc-list-context>
		<view class="zjc-rb">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item.url" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="sc-main-content">
			<view class="sc-list-header">
				<view class="sc-title" style="margin-top: 0rpx; margin-left: 30rpx;" >
					<view style="font-size: 40rpx;">路线列表</view>
					<view style="font-size: 17rpx;">List of Scenic Spots</view>
				</view>
				
				<view class="sc-header-image">
					<image src="../../static/icon/sc-list-icon.png" mode="" style="width: 300rpx; height: 200rpx;"></image>
				</view>
			</view>
			<view class="sc-main-item" v-for="item in routeList" :key="item.routeId" @click="toRouteDetail(item.routeId)">
				<view class="sc-main-item-image">
					<image :src="item.routeCoverImg" mode="" style="width: 300rpx; height: 200rpx;"></image>
				</view>
				<view class="sc-main-item-desc">
					<view class="title" style="font-size: 35rpx; color: black;">
						{{item.routeName}}
					</view>
					<view >
						<view class="tag-view">
								<uni-tag  inverted="true" text="路线推荐" type="success" />
						</view>
						<view style="width: 100%; height: 5rpx;">
							
						</view>
						<view class="tag-view">
								<text>推荐季节：</text> <uni-tag inverted="true" :text="item.routeSeason" type="warning" />
						</view>
					</view>
					
					
				</view>
				
			</view>
			<view style="width: 100%; height: 150rpx; max-width: 100%;">
				<view style=" margin-top: 140rpx; margin-left: 250rpx; position: absolute; bottom:30rpx;">
					<text style="font-size: 26rpx;">我也是有底线的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				routeList:[
					{
						routeId:1,
						routeDay:1,
						routeName:"一日游，青山湖--瑶湖",
						routeCoverImg:"../../static/rb1.jpg",
						routeSeason:"秋季"
					},
					{
						routeId:2,
						routeDay:2,
						routeName:"两日游，青山湖--瑶湖--万寿宫",
						routeCoverImg:"../../static/rb1.jpg",
						routeSeason:"秋季"
					},
					
				],
				current:1,
				info: [{
						content: '内容 A',
						url:"../../static/rb1.jpg"
					}, 
					{
					    content: '内容 B',
						url:'../../static/rb2.jpg'
					}, 
					{
					    content: '内容 C',
						url:'../../static/rb3.jpg'
					}],
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			change(e){
				this.current = e.detail.current
			},
			toRouteDetail(id){
				uni.navigateTo({
					url:"/pages/routeDetail/routeDetail?routeId="+id
				})
			},
			init(){
				this.request({
					url:'/route/khlist',
					method:'GET',
					
				}).then(res=>{
					if(res.code=='1'){
						this.routeList = res.data;
					}
				})
			}
		}
	}
</script>

<style scoped>

.t-tag {
		
}
.title{
	  width: 350rpx;
	  white-space: nowrap; /* 防止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 在溢出时显示省略号 */
}
.sc-main-content {
	background-color: #ffffff;
	position: absolute;
	top:450rpx;
	width: 100%;
	border-radius:20rpx;
	z-index: 2;
}
.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}
.sc-time {
	width: 60rpx;
	color: #ffaa00;
	border: #ffaa00 solid 2rpx;
}
.sc-list-header{
	margin-left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sc-main-item{
	display: flex;
	width: 90%;
	height: 220rpx;
	border-radius: 20rpx;
	background-color: #fafafa;
	margin: 0 auto;
	margin-top: 20rpx;
}
.sc-header-image image{
	border-radius: 20rpx;
}
.sc-main-item-image{
	margin-left: 10rpx;
	border-radius: 20rpx;
}
.sc-main-item-image image{
	border-radius: 20rpx;
}
.sc-main-item-desc {
	margin-left: 24rpx;
}
.sc-main-item-desc view {
	font-size: 25rpx;
	margin-top: 20rpx;
}
.desc {
	background-color: #ffedcd;
	border-radius: 10rpx;
	text-align: center;
}
</style>
